<template>
  <div>
    <el-card v-if="showListOrEdit" class="sku-list">
      <el-table :data="skuListData.records" border v-loading="isLoading">
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column label="名称" prop="skuName"></el-table-column>
        <el-table-column label="描述" prop="skuDesc"></el-table-column>
        <el-table-column label="默认图片" align="center">
          <template #default="{ row }">
            <div class="img-wrap">
              <img :src="row.skuDefaultImg" :alt="row.skuName" class="h-100" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="重量(KG)" prop="weight"></el-table-column>
        <el-table-column label="价格(元)" prop="price"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-tooltip
              :content="row.isSale ? '下架' : '上架'"
              effect="light"
              placement="top"
            >
              <el-button
                :icon="row.isSale ? Bottom : Top"
                size="small"
                :type="row.isSale ? 'success' : 'info'"
                @click="setSkuOnSale(row)"
              />
            </el-tooltip>
            <el-tooltip content="修改" effect="light" placement="top">
              <el-button
                :icon="Edit"
                size="small"
                type="primary"
                @click="getSpuInfo(row.spuId)"
              />
            </el-tooltip>
            <el-tooltip content="查看详情" effect="light" placement="top">
              <el-button
                :icon="InfoFilled"
                size="small"
                type="info"
                @click="getSkuInfo(row.id)"
              />
            </el-tooltip>
            <el-tooltip content="删除" effect="light" placement="top">
              <el-button :icon="Delete" size="small" type="danger" />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20]"
        layout="  prev, pager, next, jumper,sizes,total,"
        :total="skuListData.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      <el-drawer
        v-model="isShowDetail"
        title="I am the title"
        :with-header="false"
        size="50%"
      >
        <div class="table-wrap">
          <el-descriptions :column="1" border size="large" class="mb-20">
            <el-descriptions-item label="名称" width="10px" label-align="right"
              >{{ skuDetail.skuName }}
            </el-descriptions-item>
            <el-descriptions-item label="描述" width="10px" label-align="right"
              >{{ skuDetail.skuDesc }}
            </el-descriptions-item>
            <el-descriptions-item label="价格" width="10px" label-align="right"
              >{{ skuDetail.price }}
            </el-descriptions-item>
            <el-descriptions-item
              label="平台属性"
              width="10px"
              label-align="right"
            >
              <template #default>
                <el-tag
                  v-for="attrValue in skuDetail.skuAttrValueList"
                  :key="attrValue.id"
                  class="mr-5"
                  >{{ attrValue.valueName }}</el-tag
                >
              </template>
            </el-descriptions-item>

            <el-descriptions-item
              label="销售属性"
              width="10px"
              label-align="right"
              ><template #default>
                <el-tag
                  v-for="saleAttrValue in skuDetail.skuSaleAttrValueList"
                  :key="saleAttrValue.id"
                  class="mr-5"
                  >{{ saleAttrValue.saleAttrValueName }}</el-tag
                >
              </template>
            </el-descriptions-item>
          </el-descriptions>
          <div class="swiper-wrap" v-loading="isSwiperLoading">
            <el-carousel
              indicator-position="outside"
              v-if="!isSwiperLoading"
              trigger="click"
            >
              <el-carousel-item
                v-for="img in skuDetail.skuImageList"
                :key="img.id"
              >
                <img class="h-100" :src="img.imgUrl" :alt="img.imgName" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </el-drawer>
    </el-card>
    <addSku :spuInfo="spuInfo" v-else @showSkuList="showListOrEdit = $event" />
  </div>
</template>

<script lang="ts">
export default {
  name: 'SKUList',
}
</script>

<script lang="ts" setup>
import { Edit, InfoFilled, Delete, Top, Bottom } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import {
  getSkuListApi,
  getSkuByIdApi,
  setOnSaleApi,
  cancelSaleApi,
} from '@/api/product/skuApi'
import { getSpuByIdApi } from '@/api/product/SPUApi'
import type {
  SkuListData,
  SKuType,
  SkuItem,
} from '@/api/product/model/SkuListType'
import { ElMessage } from 'element-plus'
import addSku from '@/components/AddSku/index.vue'

const spuInfo = ref()
// 获取spu基本信息
const getSpuInfo = async (id: number) => {
  // console.log(id)
  spuInfo.value = await getSpuByIdApi(id)
  // console.log(spuInfo.value )
  showListOrEdit.value = false
}

const showListOrEdit = ref(true)
const isSwiperLoading = ref(false)
const isShowDetail = ref(false)
const isLoading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
// 定义sku数据
const skuListData = ref<SkuListData>({
  total: 0,
  records: [],
})
// 封装发送请求的方法
const reqSkuList = async () => {
  isLoading.value = true
  skuListData.value = await getSkuListApi(currentPage.value, pageSize.value)
  // console.log(skuListData.value)
  isLoading.value = false
}
// 点击上架
const setSkuOnSale = async (row: SkuItem) => {
  if (row.isSale) {
    await cancelSaleApi(row.id)
    ElMessage.success('下架架成功')
  } else {
    await setOnSaleApi(row.id)
    ElMessage.success('上架成功')
  }
  reqSkuList()
}
// 点击查看详情
const skuDetail = ref<SKuType>({
  skuName: '',
  skuDesc: '',
  price: 0,
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
  skuImageList: [],
})
// 获取sku信息
const getSkuInfo = async (id: number) => {
  isShowDetail.value = true
  isSwiperLoading.value = true
  skuDetail.value = await getSkuByIdApi(id)
  console.log(skuDetail.value)
  isSwiperLoading.value = false
}

// 组件挂载发送请求
onMounted(() => {
  reqSkuList()
})

// 切换分页
const handleCurrentChange = (page: number) => {
  currentPage.value = page
  reqSkuList()
}
const handleSizeChange = (page: number) => {
  pageSize.value = page
  reqSkuList()
}
</script>
<style scoped>
.img-wrap {
  height: 100px;
}
.pagination {
  margin-top: 20px;
}
.table-wrap {
  padding: 50px;
  /* width: 500px; */
}
.swiper-wrap {
  padding: 0 200px;
}
.sku-list {
  margin-top: 20px;
}
</style>
<style>
.h-100 {
  height: 100%;
}
.mr-5 {
  margin-right: 5px;
}
.el-carousel__item {
  text-align: center;
}
.mb-20 {
  margin-bottom: 20px;
}
</style>
